<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>使用js配置参数的示例</title>
<link rel="stylesheet" type="text/css" href="http://docs.kissyui.com/kissy-dpl/base/build/css/dpl-pkg.css"/>
<link rel="stylesheet" type="text/css" href="../../assets/demo.css"/>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js" charset="utf-8"></script>
</head>
<body>
<article id="doc">
    <h4>使用js配置参数的示例</h4>
    <p>data-config伪属性配置方式，由于uploader的配置项有点多，比较容易出错。如果你不希望将组件的配置暴露给开发修改，可以使用js传参的方式。</p>
    <p>来看下面的demo：</p>
    <!-- 上传按钮，组件配置请写在data-config内 -->
    <a id="J_UploaderBtn" class="g-u uploader-button" href="#"> 选择要上传的文件 </a>
    <p>只允许上传图片</p>
    <!-- 文件上传队列 -->
    <ul id="J_UploaderQueue" >

    </ul>
    <div class="btn-wrapper">
        <input id="J_Disabled" name="disabled" type="checkbox" value="1" checked />
        <label for="disabled">禁用按钮</label>
        <input id="J_Multiple" name="multiple" type="checkbox" value="1" />
        <label for="multiple">开启多选</label>
        <input id="J_UploadAll" type="button" value="上传所有等待的文件">
    </div>
    <p>demo详细说明，请看<a href="http://www.36ria.com/5072#jsConfig" target="_blank">《组件配置方式和关键配置—KF/Uploader快速使用指南》</a></p>
    <pre class='brush: js;'>
        var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue',{
            serverConfig:{"action":"upload.php"},
            name:"fileInput",
            urlsInputName:"fileUrls",
            autoUpload: false,
            multiple:false,
            disabled:true
        });
    </pre>
    <p>（PS:如果既有伪属性参数，又有js参数，js参数会覆盖伪属性参数）</p>
    <p>V1.2变更：可以传递multiple和disabled参数来控制按钮的多选和禁用，不再推荐直接操作按钮类。</p>
    <h4>使用themeConfig参数给主题类传参</h4>
    <pre class='brush: js;'>
            themeConfig:{
                cssUrl:'gallery/form/1.2/uploader/themes/default/style.css'
            }
    </pre>
    <h4>使用authConfig参数给验证类传参</h4>
    <pre class='brush: js;'>
            //验证配置
            authConfig: {
                allowExts:[
                    {desc:"JPG,JPEG,PNG,GIF,BMP", ext:"*.jpg;*.jpeg;*.png;*.gif;*.bmp"},
                    '不支持{ext}格式的文件上传！'
                ],
                max:[3, '每次最多上传{max}个文件！']
            }
    </pre>

</article>
<script>
    var S = KISSY,
        //包路径，实际使用请直接配置为"http://a.tbcdn.cn/s/kissy/"
            path = S.Config.debug && "../../../../../../" || "http://a.tbcdn.cn/s/kissy/";
    S.config({
        packages:[ {
            name:"gallery",
            path:path,
            charset:"utf-8"
        } ]
    });
    var $ = S.Node.all;
    KISSY.use('gallery/form/1.2/uploader/index', function (S, RenderUploader) {
        var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue',{
            serverConfig:{"action":"upload.php"},
            name:"Filedata",
            urlsInputName:"fileUrls",
            autoUpload: false,
            multiple:false,
            disabled:true,
            multipleLen:2,
           //主题配置
            themeConfig:{
                cssUrl:'gallery/form/1.2/uploader/themes/default/style.css'
            },
            //验证配置
            authConfig: {
                allowExts:[
                    {desc:"JPG,JPEG,PNG,GIF,BMP", ext:"*.jpg;*.jpeg;*.png;*.gif;*.bmp"},
                    '不支持{ext}格式的文件上传！'
                ],
                max:[3, '每次最多上传{max}个文件！']
            }
        });
        //对组件的后续操作务必放在init事件内，因为组件时可能需要异步加载模板
        ru.on("init", function (ev) {
            var uploader = ev.uploader;
            $('#J_Disabled').on('change',function(ev){
                var isChecked = $(ev.target).prop('checked');
                uploader.set('disabled',isChecked);
            });
            $('#J_Multiple').on('change',function(ev){
                var isChecked = $(ev.target).prop('checked');
                uploader.set('multiple',isChecked);
            });

            uploader.set('data',{"userName":"minghe"});
        })
    })
</script>

<!-- 代码高亮 START  -->
<link href='../../assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="../../assets/syntaxhighlighter_3.0.83/sh.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!-- 代码高亮 END  -->
</body>
</html>
